<template>
  <div class="home-list-container">
    <div class="tab-container">
      <div
        class="item"
        @click="onClickTab(index)"
        :class="{ active: currentTabIndex === index }"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="list">
      <!-- 空状态 -->
      <template v-if="datalist.length === 0 && !loading">
        <nut-empty description="无数据"></nut-empty>
      </template>
      <!-- 加载状态 -->
      <template v-if="datalist.length === 0 && loading">
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          avatar
          avatarSize="60px"
          :avatarShape="'square'"
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          avatar
          avatarSize="60px"
          :avatarShape="'square'"
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          avatar
          avatarSize="60px"
          :avatarShape="'square'"
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          avatar
          avatarSize="60px"
          :avatarShape="'square'"
          row="3"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          avatar
          avatarSize="60px"
          :avatarShape="'square'"
          row="3"
        >
        </nut-skeleton>
      </template>

      <template v-if="currentTabIndex === 0">
        <MovieItem
          :info="item"
          v-for="(item, index) in datalist"
          :key="index"
          :style="{ marginBottom: '0.5rem' }"
        ></MovieItem>
        <Loading
          :page="page"
          :total="last_page"
          :loadingFlag="loadingFlag"
        ></Loading>
      </template>
      <template v-if="currentTabIndex === 1">
        <MovieItemAssistant
          :info="item"
          v-for="(item, index) in datalist"
          :key="index"
          :style="{ marginBottom: '0.5rem' }"
        ></MovieItemAssistant>
        <Loading
          :page="page"
          :total="last_page"
          :loadingFlag="loadingFlag"
        ></Loading>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import MovieItem from "../../components/movie/item.vue";
import MovieItemAssistant from "../../components/movie/item-assistant.vue";
import Loading from "../../components/Loading/index.vue";

import * as movieApi from "../../api/movie";
import { useReachBottom } from "@tarojs/taro";
import Taro from "@tarojs/taro";

const currentTabIndex = ref(0);
const tabList = ref([{ name: "正在热映" }, { name: "即将上映" }]);
const loading = ref(false);
const page = ref(1);
const page_size = ref(5);
const total = ref(0);
const timer = ref(null);
const loadingFlag = ref(false);
const tipFlag = ref(false); // "数据过多 提示文字一开始让他隐藏 当数据getData() 回来以后 在变成true 使用loading 组件 需要传递这个值"
const last_page=ref(0)

const onClickTab = (index) => {
  if (currentTabIndex.value === index) {
    return false;
  }
  currentTabIndex.value = index;
  datalist.value = [];
  page.value = 1;
  page_size.value = 5;

  getData(index, page.value, page_size.value);
};
const datalist = ref([]);
onMounted(() => {
  getData(currentTabIndex.value, page.value, page_size.value);
});
//当页面触底时执行的函数 在函数里进行做分页
useReachBottom(() => {
  loadingFlag.value = true;
  console.log("onReachBottom");
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    if (page.value <= last_page.value) {
      page.value++;

      getData(currentTabIndex.value, page.value, page_size.value);
    } else {
      Taro.showToast({
        title: "没有更多数据了呢",
        icon: "none",
      });
    }
  }, 500);
});
//获取当前的电影列表
const getData = async (type, page, page_size) => {
  loading.value = true;
  const res: any = await movieApi.list({ type, page, page_size });
  total.value = res.total;
  last_page.value=res.last_page
  //合并每一页的数组和之前的数组
  datalist.value = [...datalist.value, ...res.data];
  loading.value = false;
  loadingFlag.value = false;
  tipFlag.value = true;
};
</script>
<style lang="scss">
.home-list-container {
  display: flex;
  flex-direction: column;
  position: relative;
  .tab-container {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 10rem;
    font-size: 0.6rem;
    color: #858a99;
    height: 2rem;
    margin: 0.5rem;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      border-radius: 10rem;
      background: #fff;
      border: 0.2rem solid #fff;
    }
    .item.active {
      background: #f6f8f9;
      // background: linear-gradient(to right, #f3f3f4, #e7e8eb);
      color: #15181d;
    }
  }
  .list {
    padding: 0 0.5rem;
  }
}
</style>
